<template>
	<view v-if="chartList.length" class="chart_main">
		<view class="chart_item" :class="{ 'box-shadow': 0 === chooseIndex }">
			<VitalSigns :date="date" :ref="chartList[0].ref" :lastTime="updateTimes[0]" />
		</view>

		<view class="chart_item" :class="{ 'box-shadow': 1 === chooseIndex }">
			<Sleep :date="date" :ref="chartList[1].ref" :lastTime="updateTimes[1]" @onDetection="onDetection" />
		</view>

		<view class="chart_item" :class="{ 'box-shadow': 2 === chooseIndex }">
			<Activity :date="date" :ref="chartList[2].ref" :lastTime="updateTimes[2]" @onDetection="onDetection" />
		</view>

		<view class="chart_item" :class="{ 'box-shadow': 3 === chooseIndex }">
			<Recover :date="date" :ref="chartList[3].ref" :lastTime="updateTimes[3]" />
		</view>

	</view>
</template>
<script>
	import dayjs from "dayjs";
	import store from "@/store/index.js";

	import Activity from "./chart/activity.vue";
	import VitalSigns from "./VitalSigns.vue";
	import Heart from "./chart/heart.vue";
	import Blood from "./chart/blood.vue";
	import Pressure from "./chart/press.vue";
	import Temperature from "./chart/temperature.vue";
	import Sleep from "./chart/sleep.vue";
	import Recover from "./chart/recover.vue";

	import {
		BLUETOOTH_STATUS
	} from "@/store/BluetoothManager.js";

	import {
		getLatestUpdateTime
	} from "@/api/ring/report.js";

	export default {
		components: {
			Activity,
			VitalSigns,
			Heart,
			Blood,
			Pressure,
			Temperature,
			Sleep,
			Recover
		},
		props: {
			date: String,
		},
		data() {
			return {
				chooseIndex: -1,
				maxHeight: "400rpx",
				mdHeight: "254rpx",

				chartRefs: [],

				intoPageFlag: true,

				chartList: [],

				updateTimes: [],

				uploadKeys: 0,
			};
		},

		computed: {
			isLogin() {
				return store.state.userToken;
			},

			chartRefLength() {
				return this.chartRefs.length;
			},

			heartRate() {
				return this.$store.state.ringDataManage.heartRate;
			},

			blood() {
				return this.$store.state.ringDataManage.bloodOxygen;
			},

			progress() {
				return this.heartRate?.progress || this.blood?.progress;
			},
		},

		onShow() {
			this.chooseIndex = -1;
		},

		mounted() {
			this.setChartList();

			this.$nextTick(() => {
				this.chartRefs = this.chartList
					.map((item) => {
						if (this.$refs[item.ref]) {
							return this.$refs[item.ref];
						}
						return null;
					})
					.filter((item) => !!item);
				this.uploadKeys++;
			});
		},

		watch: {
			uploadKeys() {
				setTimeout(() => {
					this.updateChartData();
				}, 500);
			},
		},

		methods: {
			setChartList() {
				this.chartList = [{
						component: VitalSigns,
						type: "VitalSigns",
						height: "328rpx",
						dataName: "vitalSigns Data",
						title: "体征",
						ref: "VitalSigns",
					},
					{
						component: Sleep,
						type: "sleep",
						height: "400rpx",
						dataName: "Sleep Data",
						ref: "sleep",
						title: "睡眠",
					},
					{
						component: Activity,
						type: "activity",
						height: "288rpx",
						hasMeasure: true,
						dataName: "Activity Data",
						ref: "activity",
						title: "活动",
					},
					{
						component: Blood,
						type: "recover",
						height: "288rpx",
						hasMeasure: true,
						dataName: "Recover Data",
						ref: "recover",
						title: "恢复",
					},
				];
			},

			onDetection(type) {
				this.intoPageFlag = false;
				setTimeout(() => {
					this.intoPageFlag = true;
				}, 500);
				if (this.$store.state.bleManage.bluetoothStatus !== BLUETOOTH_STATUS.CONNECTED) {
					return uni.showToast({
						title: "请与设备建立通信后测量",
						icon: "none",
					});
				}

				if (this.$store.state.ringDataManage.syncLoading) {
					return uni.showToast({
						title: "请等待同步完成",
						icon: "none",
					});
				}

				if (![0, 100].includes(this.progress)) {
					return uni.showToast({
						title: `测量频繁，请稍后`,
						icon: "none",
					});
				}

				this.$emit("onDetection", type);
			},

			handleChooseCard(index) {
				if (!this.intoPageFlag) return;
				this.gotoDataPage(this.chartList[index].dataName, this.chartList[index].title, index);
			},
			activeChange(index) {
				this.chooseIndex = index;
			},
			resetChooseIndex() {
				this.chooseIndex = -1;
			},

			gotoDataPage(type, title, index) {
				const date = this.updateTimes[index];
				const isToday = dayjs().isSame(dayjs(this.date), "day");
				const isSame = dayjs(date).isSame(dayjs(this.date), "day");
				if (isToday && !isSame) {
					console.log("日期 ======》》》》》1 ", this.updateTimes[index] || this.date);

					// 如果是今天 且同步时间不同 意味着今天没有对应的同步数据
					uni.navigateTo({
						url: `/pages/ring/detail/index?type=${type}&title=${title}&date=${this.updateTimes[index] || this.date}`
					});
				} else {
					// // 如果是今天且同步时间相同 或者 其他情况
					console.log("日期 ======》》》》》2 ", this.date);
					uni.navigateTo({
						url: `/pages/ring/detail/index?type=${type}&title=${title}&date=${this.date}`
					});
				}
			},

			hasToday() {
				const isToday = dayjs();
				return updateTimes.some((item) => {
					return dayjs(item).isSame(isToday, "day");
				});
			},

			updateChartData() {
				console.log("updateChartData start");

				// const today = dayjs().format("YYYY-MM-DD");
				getLatestUpdateTime().then((res) => {
					console.log("getLatestUpdateTime", res);
					const {
						lastHeartbeatTime: heart,
						lastBloodOxTime: blood,
						lastStepsTime: activity,
						lastPressTime: press,
						lastSleepTime: sleep,
						lastTemperatureTime: temperature,
					} = res.data;

					this.updateTimes = this.chartList.map(({
						ref
					}) => {
						switch (ref) {
							case "heart":
								return dayjs(heart).format("YYYY-MM-DD 00:00:00");
								break;
							case "blood":
								return dayjs(blood).format("YYYY-MM-DD 00:00:00");
								break;
							case "activity":
								return dayjs(activity).format("YYYY-MM-DD 00:00:00");
								break;
							case "pressure":
								return dayjs(press).format("YYYY-MM-DD 00:00:00");
								break;
							case "sleep":
								return dayjs(sleep).format("YYYY-MM-DD 00:00:00");
								break;
							case "temperature":
								return dayjs(temperature).format("YYYY-MM-DD 00:00:00");
								break;
							default:
								return null;
						}
					});

					this.chartRefs.forEach((ref, index) => {
						if (!ref) return;
						if (typeof ref.updateChartData === "function") {
							ref.updateChartData(this.updateTimes[index]);
						}
					});
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.chart_main {
		width: 100%;
		position: relative;
		padding-bottom: 120rpx;

		.chart_item {
			width: 100%;
			background-color: rgba(255, 255, 255, 0.4);
			border-radius: 20rpx;
			margin-top: 20rpx;
			overflow: hidden;
			position: relative;

			// box-shadow: 0px -1px 6px 0px rgba(255, 255, 255, 0.25) inset;
		}
	}
</style>